import Link from "next/link";
import { Button, buttonVariants } from "@/components/ui/button";
import { ChevronRight, ChevronLeft } from "lucide-react";

type JumpTemplate = (page: number, size: number) => string;

type PaginationProps = {
  page: number;
  size: number;
  totalPage: number;
  jumpTemplate: JumpTemplate;
};

export default function Pagination({ page, size, totalPage, jumpTemplate }: PaginationProps) {
  return (
    <div className="flex justify-end items-center my-3">
      <PrevPage currentPage={page} size={size} jumpTemplate={jumpTemplate} />
      <span className="mx-4">{page}</span>
      <NextPage currentPage={page} size={size} jumpTemplate={jumpTemplate} totalPage={totalPage} />
      <span className="ml-4">Total: {totalPage}</span>
    </div>
  );
}

type PrevPageProps = {
  currentPage: number;
  size: number;
  jumpTemplate: JumpTemplate;
};

function PrevPage({ currentPage, size, jumpTemplate }: PrevPageProps) {
  const disabled = currentPage <= 1;
  return disabled ? (
    <Button disabled variant="outline" size="icon">
      <ChevronLeft className="h-4 w-4" />
    </Button>
  ) : (
    <Link href={jumpTemplate(currentPage - 1, size)} className={buttonVariants({ variant: "outline", size: "icon" })}>
      <ChevronLeft className="h-4 w-4" />
    </Link>
  );
}

type NextPageProps = {
  currentPage: number;
  totalPage: number;
  size: number;
  jumpTemplate: JumpTemplate;
};

function NextPage({ currentPage, totalPage, size, jumpTemplate }: NextPageProps) {
  const disabled = currentPage >= totalPage;
  return disabled ? (
    <Button disabled variant="outline" size="icon">
      <ChevronRight className="h-4 w-4" />
    </Button>
  ) : (
    <Link href={jumpTemplate(currentPage + 1, size)} className={buttonVariants({ variant: "outline", size: "icon" })}>
      <ChevronRight className="h-4 w-4" />
    </Link>
  );
}
